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AU About Color 


When it comes to website design trends in 2019, color will be among 
the most talked-about elements. 

Color is at the root of design theory - think of how much time you 
have spent learning about and examining the color wheel. It is one 
of the factors that can create the strongest emotional connection 
with users. 

So, it’s really no doubt that color will be a big deal. 

Color in 2019 will be a shift from many of the minimal color schemes 
that have been popular. Black and white is out; bright is in. Here’s a 
look at how design projects will use color this year, so you can stay 
on trend with your projects. 
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Multi-Tonal Gradients 

Although the use of gradients faded for a while, they are back in a 
big way. They lead this chapter on color trends because gradients 
are part of larger color trends as well - they can be used with pretty 
much any color, as backgrounds or overlays and with still or moving 
images and elements. 
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In short, you’ll find multi-tonal gradients almost everywhere. (And 
that’s a good thing.) 

Color gradients are a fun and engaging color technique because they 
work in a number of ways. 

• To incorporate brand colors 

• To create a focal point 

• To help add emphasis to text elements by enhancing readability 

• To set a mood or tone for a project 

• As a filter on images to establish an identity across channels (such 
as website to social media) 
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Most websites using gradients pick a graduated color scheme using 
two or three colors on the homepage. The technique is commonly 
used for large images, although text with gradient coloring and user 
interface with gradients are gaining popularity. 

The biggest obstacle to using a gradient color pattern might be coming 
up with a color combination with stops that works effectively. 

These three tools are designed to help you create a multi-tonal gra¬ 
dient that you will love: 

• WebGradients: The library of 180 choices is made for perfect color 
gradient backgrounds. Just copy the code and use it. 

• UI Gradients: This tool also includes plenty of premade gradient 
color options that you can rotate and adjust and copy or download. 

• Gradient CSS Generator: The CSS generator lets you add custom 
colors and adjust to create a custom gradient. This is perfect if you 
want precise colors, such as brand hues. 
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Bright Hues 



Spotify 



Nike 


The boldest, brightest colors will dominate designs. 


As you can see above, the impact of bright color palettes is already 
evident from website designs from brands, such as Spotify, Nike and 
Pepsi. And as icons that lead trends, others are likely to follow. 











All About Color 12 


<2> 


VIEW PIOBIKTS v WHAT* NEW FEHI STUFF kEWSLITTER 


SIFT PEP1IR(KHJCT9 


ALL YOUR 

FAVORITE FLAVORS. 
ALL RIGHT HERE. 

Pajiii. Kel Pepii. Pnpsi Zaro Sugw. The gnng'i all hern. Compare 
**awjrr. -jjnr -"uln'lonol fac'i- and c>i«k W irfl'-edkjrtf* for all oar 
Pep*i p^adsrcli- 


¥Hwret«wjCTS 




0 


pepsi 


Pepsi 


The trick to making bright color work is to use it with purpose. Bright 

color works best when used in the following ways: 

• Without too many other visual elements competing for attention, 
such as Spotify (above), which uses color and text as primary de¬ 
sign elements 

• For headers and calls to action on blogs and in heavy text areas 
(like on the UXPin blog) 

• To create connected imagery, e.g. Nike (above) with color blocks 
and imagery using the same hues 

• With a distinct design theme, such as brutalism or retro, where 
color is a big part of the overall aesthetic 

• As a bold background choice, similar to Pepsi (above) 

• For accents and details, like oversized calls to action or design el¬ 
ements that are supposed to draw users from one item to the next 
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What’s surprisingly interesting about this color trend is that brands 
are using bright colors outside of their brand color palettes for these 
designs. That’s true of both Spotify (green) and Pepsi (dark blue and 
red). 

This trend is further emphasized by Pantone’s Color of the Year for 
2019 -16-1546 Living Coral. This bright hue is right in line with the 
emotional connections designers are trying to create. 

Here’s what Pantone says about the color choice: 

In reaction to the onslaught of digital technology and social media 
increasingly embedding into daily life, we are seeking authentic 
and immersive experiences that enable connection and intimacy. 
Sociable and spirited, the engaging nature of Pantone 16-1546 
Living Coral welcomes and encourages lighthearted activity. Sym¬ 
bolizing our innate need for optimism and joyful pursuits, Pantone 
16-1546 Living Coral embodies our desire for playful expression. 

Color is the technique that gets users to look at a brand in a new 
way, come back to a website that has a fresh look and engage with 
something that has a different emotional feel. 

Bright hues tend to be lighter, less serious and “younger” than many 
other colors. These simple associations can increase your brand’s 
connection to specific user groups and personas with color. That’s a 
big part of why we are seeing so many bright colors in design projects. 
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Color Overlays 
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When it comes to using color, almost any hue can work as an image 
overlay. 


Color overlays are a great way to keep all images on brand, enhance 
readability over images or video and add a little something extra 
when photos aren’t as dynamic as you’d like them to be. You can 
almost think of color overlays as a design solution to common prob¬ 
lems with homepage hero images. 


Overlays follow the same color trends above, with gradients and 
bright color choices as the top options. But there’s one more color 
that’s trending when it comes to overlays - dark, almost black hues. 


Dark color overlays are exceptionally easy to work with and do 
wonders in terms of readability, particularly with white text. This is 
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likely why they keep growing in popularity. But dark color overlays 
are also great for website designs that don’t have a lot of other imag¬ 
ery or want to establish a more strict or stark connection with users. 
Dark color schemes seem serious, strong or formal and somewhat 
moody. If that’s what you are going for, a dark overlay could be a 
great alternative to bright colors or gradients. 


Animated Color Effects 
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State 1 



State 3 


UXPin Blog - United States Animation 

Don’t forget color and animation when thinking about trends. 

You can definitely use effects, such as color overlays or gradients with 
moving or still images. However, there are so many other elements 
in the website design that can benefit from these color trends. One 
that’s often ignored - but shouldn’t be - is button/user interface ele¬ 
ment hover states. 

You can actually create animated states with UXPin tools for your 
projects (or client work). And you can use them specifically to create 
elements that are on-trend with color. Use states to: 

• Create a simple element like a button with the different states in 
different colors - active, hover, disabled, etc. 

• Design complex patterns, such as form input fields with empty 
input, data provided and error states 

• Components like carousels and accordion menus 
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Conclusion 

The best thing about color trends is that they are relatively easy to 
adapt to almost any type of website design. You don’t have to redesign 
your website to deploy a color trend (but you can if you like). 

These trends tend to have a little more staying power than some 
other design elements that come and go a little more swiftly. If you 
use these color concepts, it’s unlikely that you’ll have to ditch them 
after only a few months. These cycles have longer trending times; just 
think about how long black and white minimalism has been popular. 

If you’re not sure where to start with color, pick one bold color that 
fits into your brand palette and use it as an accent for a hover state. 
(Sneak it in, see how you like it.) Then expand use of that color to other 
parts of the design. You’ll be on top of 2019 color trends in no time. 


Subtle Branding 


Companies don’t feel the need for big logos anymore to create more 
authentic experiences online. In fact, one of the trends in web design 
is to showcase less branding on website homepages. 

More and more websites are opting for tiny logos on the homepage (if 
they use one at all). There’s less of an emphasis on who is providing 
content and information and more of a focus on the content itself. 

Why? 

Because that’s what users want. 

Information from Rutgers University confirms this: “There has been 
a major influx amongst marketers to not only create content, but cre¬ 
ate content that is deemed both important and shareable... it speaks 
to them on an emotional or intellectual level.” 

Without a focus on brand, there’s more of a focus on what a website 
is about. This trend falls pretty much in line with what we try to do 
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here at UXPin - enable the best user experiences. Therefore, it might 
be our favorite concept in this guide. 
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Caleb Johnson Studio 


With more focus on content, logos and brand marks get smaller and 
more subtle on the screen. While the common placement of these 
marks - the top left corner of a website - hasn’t changed, the design 
sure has. 

Instead of elaborate brand marks, there’s a shift to simple text “logos” 
in sans serif fonts. 

Not only are they simple, most of these elements are black or white 
without other color, and are often small compared to other elements 
on the screen. 

The logo is there almost because the designer felt like it needed to be, 
but not because the website is about the brand. The design is about 
the user. The shift to a more subtle logo style is part of a bigger de¬ 
sign scheme that puts more emphasis on content that users want to 
engage with and share. 
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This isn’t something that just small companies are doing. Note the 
Miracle website above by hotel chain Aloft; that simple treatment 
doesn’t make you think about the bigger brand, it leaves users to 
focus on the linens. 

Simple Icons 
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If This Then Domino’s 


Iconography reflects this shift toward subtler and simpler as well. 
Line icons are the preferred choice. 

Line icons when paired with lettering for a subtle brand mark fea¬ 
tures simple lines. Also, they’re displayed often without any color, 
to represent a single, defined element. 

Sometimes these icons are just a creative representation of a letter; 
other times they’re the shape of something common to represent what 
the brand is, like Domino’s Pizza (above). This icon uses coloring, but 
note the simplicity of it. The colors are flat and unobtrusive. 

Some of this style can be attributed to the use of favicons and styles 
of app and social media icons, where brand identifiers have to be 
small and simple to fit within those design constraints. To maintain 
consistency, these marks become a part of brand identity. 
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Icons are often paired with simple text (although not always). Addi¬ 
tionally, the “icon” might actually be a letterform plus lines, such as 
Naturalis Biodiversity Center (above). 


Image-Based Branding 



The Viq 


Some of the best examples of subtle branding are rooted in imagery. 

The way a brand looks in pictures can be a big part of what it is. This 
is especially true online where many users might engage digitally 
with a brand that they never “meet” in person. 
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Image-based branding has been around for a long time but has be¬ 
come more of a website design trend thanks to social media, where 
brands use only images to communicate with followers. 
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Websites can be an extension of this user experience for some brands. 

Image-based branding uses photos with a certain style to connect. 
The idea is that if a photo shows up in a user’s Instagram feed, for 
example, they will associate it with a certain brand. That same look 
and feel is being used on related websites so that when a user swipes 
up, they get to a web experience that mirrors that of the social media 
channel. 

How do you create image-based branding? 

• Use photos with similar themes (such as products on white back¬ 
grounds or kids on bikes) 

• Develop a color palette for photos (most pictures might contain 
an object that is green) 

• Use the same photo filters on all images 

• When adding text or logos to images, placements should be con¬ 
sistent 

• Use only photos that are on-brand on the website, so that it has 
the same feel as the related social channels 
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Creating Experiences 

All of these trends in subtle branding come down to one thing - cre¬ 
ating experiences that users want to engage with. 

That process starts in the early conceptualizing of website design 
projects. You can’t just add experience to a design. The best user ex¬ 
periences are created by merging design and engineering into one 
world of better, faster product development. 

That’s where UXPin comes in. Our code-based design tool can help 
you find the perfect intersection of code and design to create on-trend 
user experiences that will engage people online. 


Conclusion 

Just like creating websites isn’t about code or design (it’s code and 
design), subtle branding takes on the same idea. It’s not brand or user 
experience (it’s user-focused content). 

This design trend shows that authentic, real user experiences and 
interactions online are a key component of creating a loyal follow¬ 
ing. These users care less about a company’s logo or mark, and much 
more about being a part of something valuable. That’s a concept you 
can use throughout design projects, as well as for streamlining brand 
identity on homepages. 


Split-Screen Design 


One screen. Two parts. 

Split-screen design will only continue to grow in popularity. The 
effectiveness of this technique is a significant contributing factor as 
to why it’s so popular. 

Split screens for the desktop browsing visual design can actually 
enhance user experience on smaller devices. They provide the op¬ 
portunity to provide two pieces of messaging or information side- 
by-side on large screens and when designed properly, these “screens” 
fall into a vertical stack on mobile devices, providing a seamless user 
experience with the same content, regardless of user access point. 


The nice thing about split-screen design is that it works with almost 
any type of content and can be designed visually using pretty much 
any technique you want. 
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Brands like Dropbox, Google and Awwwards Conference are currently 
using this technique. (No wonder it is one of the most trending design 
elements out there.) 


Side-by-Side Split-Screens 
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Side-by-side split-screens are the most common - and popular - use 
of this design trend. 

They are effective for a number of reasons, originally outlined by 

Design Shack: 

• Encourage the user to make a choice - pick this or that 

• Highlight a vertical image 

• Create a shared experience on desktop and mobile devices 

• Establish a distinct visual flow (to a call-to-action) 

• Establish a design pattern that works with other design techniques 
and trends 
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• Create a visual that stands out from so many full-screen hero 
homepages or differentiate between types of content on a website 

Moreover, this format translates beautifully to responsive formats. 
The more vertical images in the split-screen panels have aspect ratios 
that relate to mobile device screens. 

The key element in making this design work is user experience and 
interactivity. Either side of the design is essentially a giant button 
which takes you to the content it entails. 

Use a side-by-side split-screen design when you have two equally 
important bits of content to display, and you want the user to control 
his or her journey forward with the website design. 


Top-Bottom Split-Screens 
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Mayhew 



Baileys Creamers 


Split-screens that feature a top and bottom panel are growing in 
popularity as well, particularly with e-commerce sites. 
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Note that Mayhew, above, uses a hero slider at the top of the screen 
and a row of products below. This is one of the most obvious uses 
of a top-bottom split-screen, because it provides a strong visual for 
shoppers, as well as multiple products to entice them. This user pat¬ 
tern is only expected to grow in popularity. 

However, it’s not the only way to make good use of a top-bottom split¬ 
screen. It’s effective in other uses as well: 

• Highlight two highly horizontal elements 

• Showcase a single image and panel of multiple clickable elements 

• Help drive users down the screen by showing there is more to see 

• Continuing to provide a choice so that the user controls their ex¬ 
perience 

It’s important to note here that split-screens don’t actually have to 
fill the entirety of the screen. Baileys Creamers uses a top-bottom 
split-screen background (it is a perfect symmetrical split) with two 
clickable card-style elements. This design practically combines the 
visual benefits of a top-bottom split-screen with the choice that is 
commonly associated with a more “traditional” split-screen design. 

Use a top-bottom split-screen design when you have dramatic photo 
crops or for designs that feature more than two-click elements (such 
as e-commerce design). 


Split-Screen Design 34 


Asymmetrical Split-Screens 
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While perfectly symmetrical split-screen designs are popular, you 
don’t have cut the screen exactly in half. 

The benefits to using this style are the same as above; the key differ¬ 
ence here is visual interest, and weighting of content. 

The design, the larger content area is heavier and therefore more 
important. It’ll be the thing that users see first. The lighter side of 
the design is a secondary option if the primary content area doesn’t 
intrigue users enough. 

Commonly, this style actually takes users on the same journey and is 
more of an A/B test with messaging and content. (This little market¬ 
ing trick can actually help web designers and developers continue 
to improve designs based on user actions.) 









Split-Screen Design 36 


Dropbox uses an asymmetrical split-screen to push users across the 
screen to the login/signup form. While the heavier part of the screen 
includes messaging and information, the lighter part of the screen is 
the obvious call-to-action. 

Use asymmetrical split-screen design when you have primary and 
secondary content blocks. This style gives users two chances to con¬ 
tinue engaging with a website. It’s a little less of a “this or that” choice, 
and more about providing multiple gateways to similar content. 

Image vs. White Split-Screens 
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While split-screens take on many shapes and designs, a trending aes¬ 
thetic is an image side against a white side. It doesn’t matter if the 
“screens” are side-by-side, top and bottom or asymmetrical. 







Split-Screen Design 37 


IT'S SUNDAY, 
BE AWESOME 


( focus an all aspects of communication t. digital 
production for Interactive and innovative projects, 
from imagination TO real liFe. 


ih rhirt 


« -CiejU 



Christophe Meade 



Legacy 









Split-Screen Design 38 


The common theme is that there’s more of a focus on the text and 
actual messaging with this style of split-screen. This design also tends 
to feature only one click element without that choice in the content. 
It is purely a visual design with roots in the trend. 

Use a split-screen design with a “white panel” when you have a lot of 
text content. This option provides cleaner and easier-to-read spaces 
for users so that the experience is friendly. It’s also best-suited for a 
single call-to-action. 


Practical Applications of Split-Screens 



Crescosa 


Split-screens provide so many opportunities for designs to engage 
with users. That’s the reason this trend is so popular (and continuing 
to evolve and grow.) 
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UXPin Blog - Variables and Conditional Interactions for Interactive Prototyping 
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You’ll notice that split-screens are popping up everywhere - online 
ads, lightbox and signup forms, and more. 
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They are made for interaction. Try a split-screen design and prototype 
it in UXPin to test how this engagement works. Not sure where to 
start? Here are some things you can do with conditional interactions 
in a split-screen format: 

• Collect information, such as a name to display in a greeting 

• Store user-entered data to reuse across pages and in prototypes 

• Tailor content and behaviors so users feel like the design is custom 


Conclusion 

While split-screen design is a visual technique, much of why it works 
is rooted in user experience. Use this design trend to take users on a 
journey that they control and to create more interactive experiences. 

Split-screens are popular because they don’t interfere with other 
design techniques - animations, videos, images, illustrations. Pretty 
much any other user element works with this trend. 

Remember, split-screens translate exceptionally well to responsive 
formats and smaller screens as well, so make the most of this design 
functionality. 


Data Visualizations 


Infographics have a new cool factor. 

Data visualization is a web design trend that reflects both the user’s 
desire for information and advances in technology where these ele¬ 
ments and effects work effectively. 

And it’s everywhere. 

Data visualization comes in various shapes and forms, from simple 
numbers to support a fact, to mapping to full, animated screens that 
better explain something. 

While this technique is popping up everywhere, it isn’t always easy 
to use well. A solid data visualization, helps explain a concept more 
clearly, is visually interesting and helps guide the user experience. 
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Don’t Get Hung Up on Numbers 



Brand Love Score 



In Five Words 






Data Visualizations 43 


GIORGIALUP] 



hngdi 

rtttiipirtd’Wiih... 


Giorgialupi: La Lettura 

When designers hear the word “data”, the first thing that comes to 
mind is numbers. And while numbers are a big part of data visualiza¬ 
tion (as you will see in some of the examples here), numbers aren’t 
the only way to visualize data. 

The Duke University Library has a list that includes dozens of types 
of data visualization. Some of these include: 

• Maps 

• Lists 

• 3D computer models 

• Timelines 

• Gantt charts 

• Arc diagrams 

• Pie or bar charts 
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• Tree maps 

• Heat maps 

• Network matrix 

• Hive plots 

The idea here is that you can visualize almost anything. Sometimes 

the trick is developing a creative way to do it. 

Each of the examples above use data without numbers on the screen: 

• Brand Love Score creates a chart to show brand affinity during 
a specific time period. This type of data is great for comparing 
items in a like way. 

• Five Words uses text elements to create collections of information. 
This technique is simple and highly interactive. 

• Giorgialupi is a highly complex data visualization with plenty of 
circles and facts. You might really have to dig into this one to un¬ 
derstand it fully, but the key takeaways are easy to see because of 
the size of certain circles. 
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Tell a Story 
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The Women’s Workplace Equality Index 
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Mobile strategy must be integratednot 
isolated. 
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Mobile plays a role in customer experience. 
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MARKETERS 


Adobe 2018 Mobile Study 


When it comes to data visualization as a website design trend, what 
makes it all work is having (and telling) a cohesive story. 


Putting data on a website for the sake of having data is not effective. 

It needs to have a clearly defined purpose. Telling a story is a key 

way to use data to your advantage. 

Each of the examples above does it in a different way: 

• Tomorrow’s World Values asks questions of users to create user 
profiles. Not only is this design visualizing data, but it is also highly 
interactive. It is also collecting information from user inputs so 
that the visualization grows with each new user. 

• The Women’s Workplace Equality Index uses mapping with facts to 
show inequality around the world. This use of mapping is stunning 
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and highly informative, because you see exactly what the design 
wants to show you. 

• Adobe breaks down its mobile study into data points that are high¬ 
ly digestible screen by screen, encouraging further interaction to 
move on. 


Animate it 


D £SK 



DAESK 

One of the elements that can really help data stand out is animation. 
It provides an additional layer of information that supports the story. 


What’s nice about animated data visualization is that it doesn’t have 
to be complex to be effective. Daesk, above, uses a simple number 
and chart that breaks apart to grab attention. Periodicity, below, 
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features animation that guides users across the periodic chart as a 
navigation tool. 
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The examples show that animation can be part of the information or 
a separate element that contributes to the overall experience. What’s 
important is that the design and structure of animated elements should 
be seamless. This way, the user doesn’t think about the animation as 
anything other than part of the process of interacting with the design. 


Put the User First 



Satellites 


For websites with some of the best - and most elaborate data visual¬ 
ization - the common factor is that the design puts the user in control 
of the information. 
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nab 



NAB: Talk More 



Moment Zero 








Data Visualizations 51 


Each of these trending designs show data after a user engagement. 
From a hover action or click or voice interaction, the design starts 
to shape, shift and function. 

Not only is this style of data visualization informative, but it’s also 
highly engaging. It entertains and keeps users on a website longer, 
delving deeper into the information and gleaning more from the 
story being told. (This can be a stellar technique if one of your key 
metrics is time on site.) 

This interactive style is also highly shareable. When users create 
their own experience in the website journey, they are likely to want 
to engage others in the same way to compare results or just share a 
cool find. 


Make Data Part of the Project Roadmap 





Google 

Sheets 
-CZ 


If you plan to incorporate data visualization into a website project, 
start with the data from the beginning. (Why waste time with lorem 
ipsum when you can prototype live, right?) 
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The UXPin data tool allows you to fill elements in a prototype with 
random data or with actual data that you can import from a num¬ 
ber of sources, including JSON, CSV and Google Sheets. From a URL 
or from your computer, UXPin automatically matches all the fields 
based on that data, and if you name layers, it’ll automatically link 
the respective data. 

When you prototype and design this way, it’s a lot easier for every¬ 
one to envision the finished website. It can help streamline approval 
processes and get your website live while the trendy elements are 
still trending. 


Conclusion 

Not only is data visualization a great way to help users understand 
content better, it’s also an interactive and engaging design aid. 

This is one of those trends that’s only expected to keep growing since 
faster internet connections across devices make it easier to deliver 
this type of information. And users love it. In a world where so many 
things are questionable, users love to see data that supports infor¬ 
mation in a credible way. 

Take a few minutes and make sure to click through all the examples 
here. They are deep and engaging and can help you get a better idea 
of how to start down the path of crafting valuable data visualizations 
for website projects. 


Layering with Interactivity 


“Where’s the interaction?” 

Don’t let that be the question people ask about your website design. 
One of the biggest website design trends of 2019 is layering the design 
with interactive elements to keep users engaged. You can do it in a 
number of ways, which are highlighted here. 

From Webdesigner Depot: 

Interactive layers give users something to do with the design, 
generally scrolling, while elements on the screen move in differ¬ 
ent ways. The layered effect makes everything look a little more 
real, a little less cartoonish and can help increase engagement. 

The best part of using interactive layers is that you aren’t attached 
to a specific style. Anything that uses multiple elements to create an 
immersive experience qualifies. 
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Scrolling Effects 
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Pogg Sweet Potato Pie 
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A DYNAMIC DEMONSTRATION OF 
A NEW AND NOVEL ROBOTIC SURGICAL 
GUIDANCE SYSTEM 


VIEW PEOJEtT 


0 © 


Parallax scrolling is a layered, interactive design pattern that we’ve 
become fairly accustomed to. But it is not the only way to incorporate 
layers and scroll effects into the design. 
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saiomon SAL0Mf9N.cn 
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THE WAY. 

0 


Salomon 

All you need to create an effective combination of scrolling layers 
is a foreground and background that are somewhat independent 
of each other. While this can result in parallax scrolling, that’s not 
always the case. 

Each of the three examples above handles interactive scrolling in 
different ways: 

• Pogg Sweet Potato Pie uses video, card-style call-to-action elements 
and a colorful top layer to contain the navigation menu. Put it 
all together and there’s multiple places for users to get into the 
content and interact with the design. (Note that the colored nav 
bubble sticks with the scroll.) 




Xhilarate uses a top text layer over auto scrolling (or manually 
scrolling) images that maintain user attention with ever-changing 
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imagery and messaging. The transparent top layer adds an extra 
visual effect when paired with the brightness of new “scrolls” 
coming to the top. 

• Salomon uses strong images, color and moving text elements to 
tell a story. What makes this series of layered elements exception¬ 
ally strong is image placement. The placements and steps of the 
story encourage users to keep scrolling and stay engaged with the 
content. 


Type Cutouts 


mynd 


We are 



>ur engaging 
mynd 


With typography being one of the most important design elements 
for many projects, it’s no wonder that designers are pushing to the 
boundaries - and visual composition - of text elements. In a change 
from simple text styles, designers are integrating text and background 
layers for more interactive experiments. 
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Pavilion 


From text cutouts with videos or images in the background or text that 
serves as the dominant visual on the screen, such as Mynd (above), 
adding an extra-dimension to typography can take it to another level. 
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This technique is most effective with simple typography styles that 
have fairly thick stroke widths. This is so that it is easy to see the 
background through the text element. 

It is also most impactful with short blocks of text, such as an oversized 
single letter or short words. 

Finally, to make layered text elements work, users must be able to 
discern what is in the background layer with ease. If it is too difficult 
to see, users might struggle and look away from the design. 

It is important to maintain a balance in text readability and under¬ 
standing each layer both together and independently. 


Gamification 



Takt Studio 
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IESEDE 



Pikachu 


Gamification is one of the most interactive design elements you can 
deploy in a website design. 


So, it’s no wonder that interactive layers are popping up in game- 
style projects. 
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The trick to this is that the interactive layers have to contribute to the 
player experience. Essentially, the layers have to mean something to 
the style of play or storyline. 

Take this interactivity to another level in the prototyping process with 
UXPin. Expressions help bring the power of JavaScript to prototypes 
and designs. It’s perfect for including programmatic elements in 
gameplay (or almost any other interactive design), such as: 

• Perform math on diagram data 

• Create a shopping cart for an e-commerce website 

• Build an ROI calculator for your business 

• Create a name generator 

• Make a scheduling tool 

• Show error or success messages 

• Validate email addresses 


Video... And Then Some 



Discover Lexus 






SCROLL 
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RFR = Mf=R = PERFORMANCE CLIENTS STORIES SERVICES GALLERY SCHEDULE CQNTACI fR 


REDEFINE PERFORMANCE. 

PUSH THE LIMITS. 

TRAIN SMART. 



Oust 


If 2018 was the year of video in website design (and we’d totally argue 
the case for that), then 2019 is the year of video... and something extra. 
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It might be video and text. 

Or video and timeline elements. 

Or video and still images. 

Or a background video with a more interactive layer on top. 

Or two simultaneous video elements, such as Oust (see above). 

Regardless, it’s all about video as the starting point for the design. Be¬ 
cause of moving pictures, video alone is a pretty interactive element, 
but putting it with something else can truly drive longer engagement 
and time on site. It gives users something to do and a reason to stay 
involved with a design. 


Visuals and Sound 
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With so many internet-connected devices relying on sound and voice 
for engagement, something that designers have shied away from is 
gaining traction - audio layers in website design. 
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Because of use of more voice and audio devices, users are growing 
more comfortable with sound in websites generally. While it’s still 
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not 100% recommended to include auto-play sound in the design, 
using audio as a prominent layer can be an effective tool. 

The key to making it work is for sound to be integrated with visual 
elements. Each of the examples above do this rather well: 

• Twenty One Pilots Bandito relies on sound for in an almost vir¬ 
tual-reality world where everything on the screen moves in time 
with the music from the popular group. 

• Movie Music Quiz includes a game that’s rooted in sound. The 
visual matches the audio to create an immersive experience. 

• Eno uses sound to set the scene in a layered design for e-commerce. 
While this is an atypical online shopping experience, it’s quite 
effective. The scenes in the design create an experience so that 
users can see and hear the products featured on the page. (That is 
also a layered experience with background video and items from 
the scene in the sidebar for purchase.) 

Note that the common element in each of these designs using sound 
and visual layers is that the user engages in some way to active sound. 
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Conclusion 

When it comes to creating interactivity in a website design, think in 
layers. 

Not only are layers a good way to create a scene and establish a story 
for a website design, but they can also help you organize content and 
plan the design in a way that users will want to interact with. 
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